import { defineComponent, onMounted } from 'vue';
import PCardsPage from './components/PCardsPage';
import OPcardsPage from './components/OPcardsPage';

import('./index.less');

export default defineComponent({
  name: 'MatchSheetPage',
  props: {
    deckId: {
      type: Number as PropType<number>,
      required: true,
    },
    gameId: {
      type: String as PropType<string>,
      default: () => {
        return '';
      },
    },
  },
  // @ts-ignore
  setup(props) {
    onMounted(() => {
      document.body.classList.add('padding-zero');
      document.body.classList.add('spread-page');
      document.body.classList.add('a4');
    });

    const SheetPage = () => {
      if (props.gameId === 'pcards') {
        return <PCardsPage deckId={props.deckId} />;
      }
      if (props.gameId === 'opcards') {
        return <OPcardsPage deckId={props.deckId} />;
      }
      return null;
    };

    return () => (
      <section class='sheet sheet-container'>
        <SheetPage />
      </section>
    );
  },
});
